type Props = {
  className: string
  title?: string
  children?: React.ReactNode
  // 函数类型
  onChange?: (str: string) => void
}

function MyInput(props: Props) {
  return (
    <input type="text" onChange={(e) => props.onChange?.(e.target.value)} />
  )
}

function App() {
  // 事件处理函数
  function onChange(text: number) {
    console.log(text)
  }

  return (
    <div> 
      {/* onChange需要 函数参数类型注解 */}
      <MyInput className="test" onChange={onChange}></MyInput>
      {/* 内联不需要 函数参数类型注解 */}
      <MyInput
        className="test"
        onChange={(text) => console.log(text)}
      ></MyInput>
      {/* 可以不传入onChange事件的回调函数 */}
      <MyInput className="test"></MyInput>
    </div>
  )
}
